<template>
  <div class="wrap">
    <a-modal
      :destroyOnClose="true"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      width="1200px"
    >
      <div class="choose-wrap">
        <div class="choose-title">
          <div class="choose-title-item">
            <div style="margin-right: 50px;">标准1:</div>
            <div>
              <a-select
                v-model="chooseMainStandrandId"
                style="width: 250px"
                @change="handleChangeO"
              >
                <template v-for="item in mainStandrandList">
                  <a-select-option :value="item.key" :key="item.key">
                    {{ item.title }}
                  </a-select-option>
                </template>
              </a-select>
            </div>
          </div>
          <div class="choose-title-item">
            <div style="margin-right: 50px;">标准2:</div>
            <div>
              <a-select
                v-model="chooseTargetStandrandId"
                style="width: 250px"
                @change="handleChangeT"
              >
                <template v-for="item in targetStandrandList">
                  <a-select-option :value="item.key" :key="item.key">
                    {{ item.title }}
                  </a-select-option>
                </template>
              </a-select>
            </div>
          </div>
        </div>
        <div class="choose-body">
          <template v-for="item in detailList">
            <!-- <div>{{ item.title }}</div> -->
            <template v-for="item2 in item.children">
              <div :key="item2.key" class="aaaa">
                <div class="main-detail">
                  {{ item.title + "/" + item2.title }}
                </div>
                <div class="target-detail">
                  <a-select
                    style="width: 300px"
                    v-model="submitDetailObject[item2.key]"
                    @change="event => detailChange(event, item2.key)"
                  >
                    <template v-for="op in targetDetailList">
                      <template v-for="op2 in op.children">
                        <a-select-option :value="op2.key" :key="op2.key">
                          {{ op2.title }}
                        </a-select-option>
                      </template>
                    </template>
                  </a-select>
                </div>
              </div>
            </template>
          </template>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import "@/assets/less/TableExpand.less";
import { mixinDevice } from "@/utils/mixin";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";

export default {
  name: "addModal",
  data() {
    return {
      visible: false,
      title: "新增标准",
      confirmLoading: false,
      urls: {
        categoryUrl: "/sys/category/loadTreeRoot?pcode=A01&async=true",
        categoryDetailUrl: "/sys/category/loadTreeRoot?async=false&pcode=",
        addUrl: "/orgCarbonStandardConversion/addProfessionFromAdmin",
        detailUrl: "/orgCarbonStandardConversion/getDetails",
        editUrl: "/orgCarbonStandardConversion/editFromAdmin",
      },
      mainStandrandList: [],
      targetStandrandList: [],
      chooseMainStandrandId: null,
      chooseTargetStandrandId: null,
      detailList: [],
      targetDetailList: [],
      submitDetailList: [],
      submitDetailObject: {},
      id:null
    };
  },
  mounted() {
    this.getAllCategory();
  },
  methods: {
    getDetail(id) {
      this.$http.get(this.urls.detailUrl + "?id=" + id).then(res => {
        console.log(res);
        this.id = id
        this.submitDetailObject = {};
        let info = res.result.info;
        let data = res.result.data;
        this.chooseMainStandrandId = info.mainStandardId;
        let item = this.mainStandrandList.find(
          e => e.key == this.chooseMainStandrandId
        );
        this.getMainStandradDetails(item);
        this.chooseTargetStandrandId = info.convertStandardId;

        let item2 = this.targetStandrandList.find(
          e => e.key == this.chooseTargetStandrandId
        );
        this.getTargetStandradDetails(item2);
        data.forEach(e => {
          this.$set(this.submitDetailObject, e.mainStandardId, e.convertId);
        });
        console.log(this.submitDetailObject);
      });
    },
    add() {
      this.visible = true;
    },
    edit(id) {
      console.log(id);

      this.visible = true;
      this.title = "编辑标准";
      this.getDetail(id);
    },
    handleCancel() {
      this.visible = false;
    },
    //提交
    handleOk() {

      if (this.chooseMainStandrandId == this.chooseTargetStandrandId) {
        this.$message.error("不能选择同样标准");
        return;
      }
      const formattedArray = Object.entries(this.submitDetailObject).map(
        ([key, value]) => ({
          mainStandardId: key,
          convertId: value,
        })
      );
      console.log(formattedArray);

      this.submitDetailList = formattedArray;
      console.log(this.submitDetailList);
      let mainInfo = {
        mainStandardId: this.chooseMainStandrandId,
        convertStandardId: this.chooseTargetStandrandId,
      };
      let postData = {
        data: this.submitDetailList,
        info: mainInfo,
      };
      if(this.id == null){
        this.$http.post(this.urls.addUrl, postData).then(res => {
          if (res.success) {
            this.$message.success("添加成功");
            this.visible=false
            this.$emit("modalFormOk")
          } else {
            this.$message.error(res.message);
          }
        });
      }else{
        postData.info.id = this.id
        this.$http.post(this.urls.editUrl, postData).then(res => {
          if (res.success) {
            this.$message.success("编辑成功");
            this.visible=false
            this.$emit("modalFormOk")
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    //插入删除数据
    detailChange(event, extraParam) {
      console.log("目标参数:", event);
      console.log("源参数:", extraParam);
      // let existIndex = this.submitDetailList.findIndex(e => e.mainStandardId == extraParam);
      // if(existIndex === -1){
      //   this.submitDetailList.push({ mainStandardId: extraParam, convertId: event });
      // }else{
      //   this.submitDetailList.splice(existIndex, 1, { mainStandardId: extraParam, convertId: event });
      // }
      // if (this.submitDetailObject[extraParam]) {
      //   // 如果存在，删除该 key
      //   this.$delete(this.submitDetailObject, extraParam);
      //   this.$set(this.submitDetailObject, extraParam, event);
      // } else {
      //   // 如果不存在，新增 key-value 对
      //   this.$set(this.submitDetailObject, extraParam, event);
      // }
      // this.$set(this.submitDetailObject,event, extraParam);
      console.log(this.submitDetailObject);
    },
    getAllCategory() {
      this.confirmLoading = true;
      this.$http.get(this.urls.categoryUrl).then(res => {
        this.confirmLoading = false;
        console.log(res);
        this.mainStandrandList = res.result;
        this.targetStandrandList = res.result;
      });
    },
    handleChangeO(value) {
      this.chooseMainStandrandId = value;
      var target = this.targetStandrandList.find(e => e.key == value);
      if (target != null) {
        console.log(target);
        target.disabled = true;
      }
      let item = this.mainStandrandList.find(e => e.key == value);
      this.getMainStandradDetails(item);
    },
    getMainStandradDetails(entity) {
      this.$http.get(this.urls.categoryDetailUrl + entity.code).then(res => {
        this.detailList = res.result;
      });
    },
    getTargetStandradDetails(entity) {
      this.$http.get(this.urls.categoryDetailUrl + entity.code).then(res => {
        this.targetDetailList = res.result;
      });
    },
    handleChangeT(value) {
      if (this.chooseMainStandrandId == null) {
        this.$message.error("还没有选择标准1");
        return;
      }
      if (this.chooseMainStandrandId == this.chooseTargetStandrandId) {
        this.$message.error("不能选择同样标准");
        return;
      }
      let item = this.targetStandrandList.find(e => e.key == value);
      this.getTargetStandradDetails(item);
      this.chooseTargetStandrandId = value;
    },
  },
};
</script>
<style scoped lang="less">
.choose-wrap {
  height: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: auto;
  .choose-title {
    display: flex;
    margin-bottom: 20px;
    // background-color: green;
  }
  .choose-title-item {
    display: flex;
    flex: 1;
    padding-left: 20px;
    align-items: center;
    font-size: 16px;
    // justify-content: center;
  }
  .body-item {
    margin-bottom: 10px;
    // flex: 1;
  }
  .main-detail {
    flex: 1;
  }
  .target-detail {
    flex: 1;
  }
  .aaaa {
    display: flex;
    margin-bottom: 3px;
    background-color: #ddd;
    padding: 5px 15px;
    align-items: center;
  }
}
</style>
